<template>
  <div class="next-agents">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-form :model="searchForm" size="small" inline>
        <el-form-item label="代理商名称">
          <el-select v-model="searchForm.agent_name" filterable clearable placeholder="全部" name="agent_name">
            <el-Option v-for="(item,index) in name" :value="item" :label="item" :key="index">{{ item }}</el-Option>
          </el-select>
        </el-form-item>
        <el-form-item label="代理商编号">
          <el-input placeholder="输入代理商编号" name="sn" v-model="searchForm.sn"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input placeholder="输入联系电话" v-model="searchForm.telphone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select filterable v-model="searchForm.status" clearable placeholder="全部" name="status">
            <el-option v-for="(item,index) in options" :value="item.id" :label="item.status" :key="index">{{ item.status }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
        <el-table :data="ag_date" size="small" v-loading="loading" :header-cell-style="{background:'#f2f2f2'}">
          <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
          <el-table-column align="center" prop="serial_number" label="代理商编号" ></el-table-column>
          <el-table-column align="center" prop="agent_name" label="代理商名称" ></el-table-column>
          <el-table-column align="center" prop="pid" label="上级代理商" ></el-table-column>
          <el-table-column align="center" prop="agent_region" label="代理区域" ></el-table-column>
          <el-table-column align="center" prop="respo_name" label="负责人" ></el-table-column>
          <el-table-column align="center" prop="telphone" label="电话" ></el-table-column>
          <el-table-column align="center" prop="created_at" label="开通时间" ></el-table-column>
          <el-table-column align="center" label="状态" >
            <template slot-scope="scope">
              <span :class="scope.row.status === 0 ? '' : scope.row.status === 4 ? 'succ' : 'err'">{{ scope.row.status === 0 ? '正常' : scope.row.status === 1 ? '停用' : scope.row.status === 3 ? '已过期' : scope.row.status === 4 ? '未生效' : '无' }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="ag_next_shop" label="下属商户" >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="nextTo(scope.row.id)">查看</el-button>
            </template>
          </el-table-column> -->
          <el-table-column align="center" label="操作" >
            <template slot-scope="scope">
              <div v-if="roles[0] === 0">
                <el-button type="text" size="small" @click="to('editAgents',scope.row.serial_number)">修改</el-button>
                <el-button type="text" size="small" class="btn-warning" @click="stop(scope.$index, scope.row.serial_number)" v-if="scope.row.status === 0">停用</el-button>
                <el-button type="text" size="small" class="tip" @click="start(scope.$index, scope.row.serial_number)" v-if="scope.row.status === 1">开启</el-button>
                <el-button type="text" size="small" @click="addDayNumShow(scope.row.serial_number, scope.row.day_make_code_limit)">配置</el-button>
              </div>
              <el-button type="text" size="small" class="btn-error" v-else @click="to('AgentsList',scope.row.serial_number)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        class="fr page"
        @current-change="handleCurrentChange"
        :current-page.sync="page.currentpage"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
      <el-dialog title="空码预制" width="400px" :visible.sync="config_show">
        <el-form :model="day_num" inline size="small" :rules="rules" ref="dialog" class="mt20">
          <el-form-item size="small" label="每日可预制数量">
            <el-input type="number" v-model="day_num.num" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"  class="dialog-footer">
          <el-button @click="handleClickCanle">取消</el-button>
          <el-button type="primary" @click="addDayNumPost">保存</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { SubAgentInit, agentSubSearch, nextAgentPage, state } from '@/api/myAngent'
import { addDayNum } from '@/api/myAngent'

export default {
  name: 'next-agents',
  components: {
    Breadcrumb
  },
  data() {
    return {
      searchForm: {
        agent_name: '',
        sn: '',
        status: '',
        telphone: ''
      },
      page: {
        total: 0,
        pageSize: 1,
        currentpage: 1
      },
      day_num: {
        num: '',
        agent_num: ''
      },
      rules: {
        num: [{ required: true, trigger: 'blur', message: '必须填写哦~' }]
      },
      ag_date: [],
      options: [],
      name: [],
      access: '', // 权限等级
      loading: true,
      config_show: false
    }
  },
  methods: {
    handleCurrentChange(val) {
      nextAgentPage(this.id, val, this.searchForm).then(response => {
        this.ag_date = response.data.result.agent.data
      })
    },
    to(name, index) {
      this.$router.push({ name: name, query: { id: index }})
    },
    nextTo(index) {
      this.$router.push({ name: 'AffiliatedBusinesses', query: { id: index }})
    },
    search() {
      this.loading = true
      this.searchForm.id = this.id
      agentSubSearch(this.searchForm).then(response => {
        this.ag_date = response.data.result.agent.data
        this.page.total = response.data.result.agent.total
        this.page.pageSize = response.data.result.agent.per_page
        this.page.currentpage = response.data.result.agent.currentpage
        this.loading = false
      })
    },
    stop(index, id) {
      const model = confirm('是否停用')
      if (model) {
        state(id, 1).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success('操作成功')
            this.ag_date[index].status = 1
          } else {
            this.$message.error('操作失败')
          }
        })
      }
    },
    start(index, id) {
      state(id, 0).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success('操作成功')
          this.ag_date[index].status = 0
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    addDayNumShow(agent_num, limit) {
      this.day_num.agent_num = agent_num
      this.day_num.num = limit
      this.config_show = true
    },
    addDayNumPost() {
      this.$refs['dialog'].validate((valid) => {
        if (valid) {
          addDayNum(this.day_num).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.handleCurrentChange(this.page.currentpage)
              this.config_show = false
            } else {
              this.$message.error(res.data.errorMsg)
            }
          })
        }
      })
    },
    handleClickCanle() {
      this.$refs['dialog'].resetFields()
      this.config_show = false
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'roles'
    ]),
    visitedGread() {
      return this.$store.state.gread.status
    }
  },
  created() {
    this.access = this.roles[0]
    SubAgentInit(this.id).then(response => {
      this.ag_date = response.data.result.agent.data
      this.options = response.data.result.status
      this.name = response.data.result.name
      this.page.total = response.data.result.agent.total
      this.page.pageSize = response.data.result.agent.per_page
      this.page.currentpage = response.data.result.agent.currentpage
      this.loading = false
    })
  }
}
</script>